<script setup>
import { ref, onMounted } from 'vue'
import Echarts from '@/components/echarts/index.vue'
const option = ref({})
const chartRef = ref()

onMounted(() => {
    initOption()
})
// 两种清理方式
function clearOption() {
    // 绘制空图表
    // option.value = null
    // 处理chart
    chartRef.value.dispose();
}
// 初始化图表配置
function initOption() {
    option.value = {
        title: {
            text: 'Stacked Line'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['Email']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: 'Email',
                type: 'line',
                stack: 'Total',
                data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
            },
        ]
    };
}
function update() {
    if (!option.value) return
    option.value.title.text = '已修改'
}
function start() {
    initOption()
}

function chartClick(e, v) {
    alert(v)
}
</script>

<template>
    <el-container>
        <el-main>
            <el-button type="primary" @click="start">渲染</el-button>
            <el-button type="primary" @click="update">局部数据修改</el-button>
            <el-button type="primary" @click="clearOption">清空</el-button>
            <Echarts ref="chartRef" :option="option" style="width: 100%;height: 300px;" is-resize :resize-delayed="500"
                @click="chartClick" deep-option />

        </el-main>
    </el-container>
</template>
